<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
    <link rel="stylesheet" href="../../static/css/layui.css" media="all">
</head>
<<<<<<< HEAD
<style>
    .layui-table-cell {
        text-align: center;
    }
</style>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加行</button>
        <div class="layui-btn layui-btn-sm">
            <input type="text" name="search">
        </div>
        <button class="layui-btn layui-btn-sm layui-icon" lay-event="search">&#xe615;</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../../static/layui.js" charset="utf-8"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.$;

        table.render({
            url: "/user/list"
            , method: "GET"
            , elem: '#test'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                    , {field: 'name', title: '用户名', width: 120, edit: 'text'}
                    , {field: 'password', title: '密码', width: 250}
                    , {field: 'updateBy', title: '更新人', width: 120, edit: 'text'}
                    , {
                    field: 'updateTime', title: '更新时间', minwidth: 80, sort: true, templet: function (d) {
                        return layui.util.toDateString(d.updateTime);
                    }

                }
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ]
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
                case 'add':
                    layer.msg("新增一行table");
                    var str = "";
                    str += "<tr data-index='1' class='layui-table-hover'>"
                    str += "<td data-field='0' data-key='1-0-0' class='layui-table-col-special'><div class='layui-table-cell laytable-cell-1-0-0 laytable-cell-checkbox'><input type='checkbox' name='layTableCheckbox' lay-skin='primary'><div class='layui-unselect layui-form-checkbox' lay-skin='primary><i class='layui-icon layui-icon-ok'>::before</i></div></div></td>"
                    str += "<td data-field='id' data-key='1-0-1' class><div class='layui-table-cell laytable-cell-1-0-1'>2</div></td>"
                    str += "<td data-field='name' data-edit='text' data-key='1-0-2' class><div class='layui-table-cell layui-cell-1-0-2'>zmx</div></td>"
                    str += "<td data-field='password' data-key='1-0-3' class><div class='layui-table-cell layui-cell-1-0-3'>zmx</div></td>"
                    str += "<td data-field='updateBy' data-edit='text' data-key='1-0-4' class><div class='layui-table-cell layui-cell-1-0-4'>zmx</div></td>"
                    str += "<td data-field='updateTime' data-key='1-0-5' class><div class='layui-table-cell layui-cell-1-0-5'>" + layui.util.toDateString(new Date()) + "</div></td>"
                    str += "<td data-field='6' data-off='true' data-key='1-0-6' class='layui-table-col-special'><div class='layui-table-cell layui-cell-1-0-6'><a class='layui-btn layui-btn-danger layui-btn-xs' lay-event='add'>增加</a></div></td>"
                    str += "</tr>"
                    $(".layui-table-body .layui-table").append(str);
                    break;
                case 'search':
                    layer.msg("根据用户名查找");
                    var name = $('input[name="search"]').val();
                    table.reload('test', {
                        url: 'user/search',
                        where: {
                            name: name,
                        },
                        page:{
                            curr:1
                        }
                    });
                    break;
            }
            ;
        });

        //监听单元格编辑
        table.on('edit(test)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            // layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            $.ajax({
                url: '/user/update',
                type: 'POST',
                dataType: 'json',
                data: data,
                success: function (e) {
                    if (e.code == 0) {
                        layer.msg(e.msg);
                    } else {
                        layer.msg(e.msg);
                    }
                },
                error: function (e) {
                    layer.msg(e);
                }
            })
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/user/del",
                        type: "POST",
                        dataType: "json",
                        data: {
                            id: data.id
                        },
                        success: function (e) {
                            if (e.code == 0) {
                                layer.msg(e.msg);
                            } else {
                                layer.msg(e.msg);
                            }
                        },
                        error: function (e) {
                            layer.msg(e);
                        }
                    })
                });
            } else if (obj.event == 'add') {
                $.ajax({
                    url: "/user/add",
                    type: "POST",
                    dataType: "json",
                    data: data,
                    success: function (e) {
                        if (e.code == 0) {
                            layer.msg(e.msg);
                        } else {
                            layer.msg(e.msg);
                        }
                    },
                    error: function (e) {
                        layer.msg(e);
                    }
                })
            }
        });
    });
=======
<body>
用户管理界面
<script src="../../static/layui.js" charset="utf-8"></script>
<script>

>>>>>>> 6d085ac650d1276c28ed128411d02424e862f186
</script>
</body>
</html>